<template>
  <div>
    <!-- 返回按钮 -->
   <div class="top" @click="home">
      <van-nav-bar
      left-text="返回"
      left-arrow>
      </van-nav-bar>
    </div>

    <!-- 店铺名称 -->
    <div class="center">
      <van-cell-group>
        <van-cell :title="shop.shopName" >
          <template #icon>
            <van-icon name="https://img01.yzcdn.cn/vant/ipad.jpeg" 
              size="80"
              class="search-icon" />
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <!-- 商品分类 -->
    <van-tabs v-model="active" animated>
      <van-tab title="点菜">
        <div class="container content">
          <div class="sidebar">
            <van-sidebar v-model="activeKey" @change="onChange">
              <van-sidebar-item
                :title="item.itemTypeName"
                :name="item.itemTypeId"
                v-for="(item, index) in sidebarList"
                :key="index"
                @click="items(item.itemTypeId)"
              ></van-sidebar-item>
            </van-sidebar>
          </div>

    <!-- 商品 -->
    <div class="content" ref="content">
      <van-card
        :price="item.price"
        desc="描述信息"
        :title="item.itemName"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        v-for="(item, index) in itemList"
        :key="index"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>

        <template #footer>
          <!-- <van-button size="mini" style="background-color: #ffcd4d;">选规格</van-button> -->
          <van-button class="button-with-badge" size="mini" @click="onShow(item)">
                  选规格
            <van-badge class="badge" :content="badgeContent"></van-badge>
          </van-button>
        </template>
      </van-card>
    </div>

    </div>
      </van-tab>

      <van-tab title="套餐">
        套餐界面
      </van-tab>

      <van-tab title="评价">
        评价界面
      </van-tab>
      
    </van-tabs>
    
     <!-- 选规格详情 -->
     <div>
      <van-dialog width="400px" v-model="show" @cancel="onCancel" show-cancel-button confirmButtonText="加入购物车" confirmButtonColor="#ffdd01">
          <div style="height: 400px;width: 90%;background-color: antiquewhite;margin: 0 auto; padding-top: 15px;">
            {{ itemObj == null ? "":itemObj.itemName }}
            <div style="margin-top: 20px;margin-bottom: 10px;color: #858687;">份量</div>
            <van-checkbox v-model="checked" shape="square">复选框</van-checkbox>
            
          </div>
      </van-dialog>
    </div>
    <!-- 底部购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="cart-o" text="购物车" badge="2"></van-goods-action-icon>
      <van-goods-action-button type="danger" text="结算"
       :to="`/submitOrder/${id}`" 
       style="font-weight: 
       bolder;color: black;" 
       color="#ffdd01">
      </van-goods-action-button>
    </van-goods-action>
</div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'Shop',
  props:['id'],
  data() {
    return {
      //
      activeKey: 0,
      badgeContent: 10,
      checked: true,
      sidebarList: [],
      isScrolling: false,
      active:0,
      //选规格。
      show:false,
      //商品列表
      itemList:[
        {
          itemName:"茄子炒蛋",itemWeight:{weightName:"分量",value:["400克","600克"]},
          itemSpicy:{spicyName:"辣度",value:["微辣","中辣","特辣"],option:["多选","单选"]},
          price:29.9
        },
        {
          itemName:"青瓜炒火腿",itemWeight:{weightName:"分量",value:["400克","600克"]},
          itemSpicy:{spicyName:"辣度",value:["微辣","中辣","特辣"]},
          price:29.9
        },
        {
          itemName:"外婆菜",itemWeight:{weightName:"分量",value:["400克","600克"]},
          itemSpicy:{spicyName:"辣度",value:["微辣","中辣","特辣"]},
          price:29.9
        },
        {
          itemName:"冬瓜炒肉",itemWeight:{weightName:"分量",value:["400克","600克"]},
          itemSpicy:{spicyName:"辣度",value:["微辣","中辣","特辣"]},
          price:29.9
        },
        {
          itemName:"茄子炒蛋",itemWeight:{weightName:"分量",value:["400克","600克"]},
          itemSpicy:{spicyName:"辣度",value:["微辣","中辣","特辣"]},
          price:29.9
        },
      ],
      //商品对象
      itemObj:null,
      shop:{}
}
  },
  mounted() {
    this.$nextTick(() => {
      this.setupScrollEvent();
      this.setupTouchEvents();
  });
  },
  methods: {
   
    home(){
      this.$router.push({path:"/"})
    },
    onCancel(){
      console.log(2222);
      this.itemObj = null
      console.log(this.itemObj);
    },
    onShow(item){
      this.show = true
      this.itemObj = item
      console.log(this.itemObj);
    },
    onChange(index) {
      console.log(index);
      console.log('activeKey=' + this.activeKey);
    },
    handleScroll(event) {
      if (!this.isScrolling) {
        event.preventDefault();
        const deltaY = event.deltaY;
        const content = this.$refs.content;
        content.scrollTop += deltaY;
      }
    },
    handleTouchStart(event) {
      this.startY = event.touches[0].clientY;
    },
    handleTouchMove(event) {
      const content = this.$refs.content;
      const deltaY = event.touches[0].clientY - this.startY;
      content.scrollTop -= deltaY;
      this.startY = event.touches[0].clientY;
    },
    setupScrollEvent() {
      const content = this.$refs.content;
      content.addEventListener('wheel', this.handleScroll, { passive: false });
    },
    setupTouchEvents() {
      const content = this.$refs.content;
      content.addEventListener('touchstart', this.handleTouchStart);
      content.addEventListener('touchmove', this.handleTouchMove, {
        passive: false,
      });
    },
    queryShop(){
      axios.get("http://localhost:9090/api/shop/getListShopAndItemAndItemType",{
        params:{
          shopId:this.id,
        }
      })        
        .then(res => {    
          console.log(res.data.data);
          this.shop = res.data.data.shop;
          this.listItemType();
        })        
        .catch(err => {            
            console.log(err.data)        
        }) 
    },
    listItemType(){
      axios.get("http://localhost:9090/api/Item/listItem",{
        params:{
          typeId:this.id,
        }
      })        
        .then(res => {    
          console.log(res.data.data[0]);
          this.items(res.data.data[0].itemTypeId)
          this.sidebarList = res.data.data;

        })        
        .catch(err => {            
            console.log(err.data)        
        }) 
    },
    items(id){
      console.log("id:"+id);
    },
  },
  created(){
    this.queryShop()
  }
};
</script>

<style scoped>
.button-with-badge {
  position: relative;
  background-color: #ffdd4d;
}

.badge {
  position: absolute;
  top: -11px;
  right: -12px; 
}
.container {
  display: flex;
}

.sidebar {
  /* flex: 0 0 120px; */
  overflow-y: auto;
}

.content {
  flex: 1;
  overflow-y: auto;
  height: calc(80vh - 70px);
}

.van-sidebar-item {
  background-color: #f8f8f8;
  cursor: pointer;  
}
</style>
